<style scoped >
    .seebody .ivu-modal .center .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .seebody .ivu-modal .center .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-date-picker{width: 90%;}
    .tenddata .ivu-upload{display: inline-block;}
    .tenddata .tendbutton{width: 80px;color: #7a7676;background-color: #ffffff;margin-bottom: 12px;}
    .tenddata .tendbutton:hover{color: #37b3b3;border:1px solid #37b3b3;}
</style>
<template>
    <div class="console-product">
        <!--头部-->
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">物流中心</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">其他订单</span>
                </div>
            </i-col>
            <i-col class="fr">
                <span>
                    <Button  @click="tendData"><i class="iconfont cofont">&#xe61d;</i> 导入数据</Button>
                    <Modal class-name="popup" class="tenddatabody" v-model="otherModal" :mask-closable="false" width="275">
                        <p slot="header" style="color: #eeebeb;" v-drag>
                            <span>导入其他订单</span>
                        </p>
                        <div  class="tenddata" style="height: 170px;">
                            <Row>
                                <i-col>
                                    <label style="display:inline-block;width: 75px">导出模板：</label>
                                    <Button class="tendbutton" :loading="modal_loading" @click="exportData">导出</Button>
                                </i-col>
                                <i-col>
                                    <Upload :action="actionupload" :headers="uploadHeader" :format="['xls','xlsx']" :on-format-error="handleFormatError" :on-progress="uploadprogress"  :on-success="uploadSuccess" :on-error="uploadError" :default-file-list="fileList">
                                        <label style="display:inline-block;width: 75px">导入Excel：</label>
                                        <Button class="tendbutton" type="ghost">上传文件</Button>
                                    </Upload>
                                </i-col>
                            </Row>
                            <span>备注:只能导入Excel表格，包含.xls和xlsx类型</span>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
            </i-col>
            <Modal class-name="popup" class="seebody" v-model="editModal" @on-cancel="closeOtherOrder('otherValidate')" :mask-closable="false" width="600">
                <p slot="header" style="color: #eeebeb;"v-drag>
                    <span>编辑</span>
                </p>
                <div class="center">
                    <Form  ref="otherValidate" :model="otherValidate" :rules="ruleOtherOrder" label-position="left" :label-width="70">
                        <Row>
                            <input type="hidden" name="id" v-model="otherValidate.id">
                            <i-col span="12">
                                <Form-item label="订单号:" prop="orderNo">
                                    <span>{{otherValidate.orderNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="物流单号:" prop="logisticsNo">
                                    <span>{{otherValidate.logisticsNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="系统单号:" prop="systemNo">
                                    <span>{{otherValidate.systemNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="状态:" prop="status">
                                    <span>{{otherValidate.status == 0 ? '未安排':'已安排'}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="交货日期:" prop="deliveryDate">
                                    <Date-picker type="date" v-model="otherValidate.deliveryDate" placeholder="选择日期"></Date-picker>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="价格:" prop="price">
                                    <Input v-model="otherValidate.price"></Input>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="用户:" prop="username">
                                    <Input v-model="otherValidate.username"></Input>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="服装大类:" prop="cloth">
                                    <Input v-model="otherValidate.cloth"></Input>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="面料号:" prop="fabricNo">
                                    <Input v-model="otherValidate.fabricNo"></Input>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="数量:" prop="quantity">
                                    <Input v-model="otherValidate.quantity"></Input>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="订单类型:" prop="orderType">
                                    <Radio-group v-model="otherValidate.orderType">
                                        <Radio label="1">ERP</Radio>
                                        <Radio label="2">返修</Radio>
                                        <Radio label="3">半成品</Radio>
                                    </Radio-group>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="客户姓名:" prop="customer">
                                    <Input v-model="otherValidate.customer"></Input>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form>
                </div>
                <div slot="footer">
                    <div class="footer">
                        <Button class="save" :loading="modal_loading" @click="saveOtherOrder('otherValidate')">保存</Button>
                        <Button class="clear" @click="cancelOtherOrder">清空</Button>
                    </div>
                </div>
            </Modal>
            <Modal class-name="popup" class="seebody" v-model="seeModal" @on-cancel="closeseeOtherOrder('seeotherValidate')" :mask-closable="false" width="600">
                <p slot="header" style="color: #eeebeb;" v-drag>
                    <span>查看</span>
                </p>
                <div class="center">
                    <Form  ref="seeotherValidate" :model="seeotherValidate" label-position="left" :label-width="70">
                        <Row>
                            <input type="hidden" name="id" v-model="seeotherValidate.id">
                            <i-col span="12">
                                <Form-item label="订单号:" prop="orderNo">
                                    <span>{{seeotherValidate.orderNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="物流单号:" prop="logisticsNo">
                                    <span>{{seeotherValidate.logisticsNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="系统单号:" prop="systemNo">
                                    <span>{{seeotherValidate.systemNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="状态:" prop="status">
                                    <span>{{seeotherValidate.status == 0 ? '未安排':'已安排'}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="交货日期:" prop="deliveryDate">
                                    <span>{{seeotherValidate.deliveryDate == null ? '': new Date(seeotherValidate.deliveryDate).format('yyyy-MM-dd')}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="价格:" prop="price">
                                    <span>{{seeotherValidate.price}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="用户:" prop="username">
                                    <span>{{seeotherValidate.username}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="服装大类:" prop="cloth">
                                    <span>{{seeotherValidate.cloth}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="面料号:" prop="fabricNo">
                                    <span>{{seeotherValidate.fabricNo}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="数量:" prop="quantity">
                                    <span>{{seeotherValidate.quantity}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="订单类型:" prop="orderType">
                                    <span>{{seeotherValidate.orderType == 1 ? 'ERP': seeotherValidate.orderType == 2 ? '返修':'半成品'}}</span>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="客户姓名:" prop="customer">
                                    <span>{{seeotherValidate.customer}}</span>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form>
                </div>
                <div slot="footer"></div>
            </Modal>
        </Row>
        <!--头部结束-->
        <!--主体部分-->
        <div class="console-product-contcent invoice" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" ref="otherordersForm" :model="otherordersForm" inline>
                <Form-item label="订单号:" :label-width="50" style="width: 160px">
                    <Input v-model="otherordersForm.orderNo" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="客户姓名:" :label-width="65" style="width: 160px">
                    <Input v-model="otherordersForm.customer" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="物流单号:" :label-width="65"  style="width: 160px">
                    <Input v-model="otherordersForm.logisticsNo" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item label="系统单号:" :label-width="65"  style="width: 160px">
                    <Input v-model="otherordersForm.systemNo" @on-enter="invoiceSearch"></Input>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="invoiceSearch">搜索</Button>
                </Form-item>
            </Form>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" stripe border :columns="otherOrdersColumns" ref="otherOrdersData" :data="otherOrdersData" ></Table>
            <!-- 分页-->
            <Modal v-model="delModal" class-name="delect" width="250" @on-cancel="delCancel" :mask-closable="false" >
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                        </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            const validateDate = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择交货日期'));
                } else {
                    callback();
                }
            };
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,//加载
                //搜索
                otherordersForm: {
                    orderNo: '',//订单号
                    username: '',//客户姓名
                    logisticsNo: '',//物流单号
                    systemNo: ' ',//系统单号
                },
                //发票管理表格数据
                otherOrdersColumns:[
                    {
                        width:'7%',
                        title:'订单类型',
                        key:'orderType',
                        render: (h, params) => {
                            var text = params.row.orderType == 1 ? 'ERP': params.row.orderType == 2 ? '返修':'半成品';
                            return h('Tooltip', {
                                props: {
                                    content:text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                    }
                    },
                    {
                        width:'10%',
                        title:'用户',
                        key:'username',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.username,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.username)]);
                        }
                    },
                    {
                        width:'11%',
                        title:'订单号',
                        key:'orderNo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderNo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.orderNo)]);
                        }
                    },
                    {
                        width:'11%',
                        title:'系统单号',
                        key:'systemNo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.systemNo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.systemNo)]);
                        }
                    },
                    {
                        width:'11%',
                        title:'物流单号',
                        key:'logisticsNo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.logisticsNo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.logisticsNo)]);
                        }
                    },
                    {
                        width:'10%',
                        title:'客户姓名',
                        key:'customer',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.customer,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.customer)]);
                        }
                    },
                    {
                        width:'8%',
                        title:'价格',
                        key:'price',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.price,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.price)]);
                        }
                    },
                    {
                        width:'9%',
                        title:'交货日期',
                        key:'deliveryDate',
                        render: (h, params) => {
                            const text = params.row.deliveryDate != null ? new Date(params.row.deliveryDate).format('yyyy-MM-dd') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'5%',
                        title:'状态',
                        key:'status',
                        render: (h, params) => {
                            var text = params.row.status == 0 ? '未安排':'已安排';
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'18%',
                        title:'操作',
                        key:'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"green",
                                        on: {
                                            click: () => {
                                                this.openOther(params.row.id)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-chakan'
                                        }),
                                        h("span",'查看')
                                    ]),
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editOtherorders(params.row.id)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.remove(params.row.id)
                                            }
                                        }
                                    }, [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ])
                            ]);
                        }
                    }
                ],
                otherOrdersData:[],
                otherModal:false,//导入数据
                fileList:[],
                actionupload:this.$store.state.url+'/otherorders/import',
                uploadHeader:{Authorization : "Bearer "+localStorage.getItem('token')},
                seeModal:false,//查看弹窗
                otherValidate:{
                    id:'',
                    orderNo:'',
                    logisticsNo:'',
                    systemNo:'',
                    status:'',
                    deliveryDate:'',
                    price:'',
                    username:'',
                    cloth:'',
                    fabricNo:'',
                    quantity:'',
                    orderType:'1',
                    customer:''
                },
                seeotherValidate:{
                    id:'',
                    orderNo:'',
                    logisticsNo:'',
                    systemNo:'',
                    status:'',
                    deliveryDate:'',
                    price:'',
                    username:'',
                    cloth:'',
                    fabricNo:'',
                    quantity:'',
                    orderType:'',
                    customer:''
                },
                ruleOtherOrder:{
                    deliveryDate: [
                        {required: true, validator: validateDate, trigger: 'change'}
                    ],
                    username: [
                        {required: true, message: '请输入用户', trigger: 'blur'},
                    ],
                    cloth: [
                        {required: true, message: '请输入服装大类', trigger: 'blur'},
                    ],
                    fabricNo: [
                        {required: true, message: '请输入面料号', trigger: 'blur'},
                    ],
                    quantity: [
                        {required: true, message: '请输入数量', trigger: 'blur'},
                    ],
                    customer: [
                        {required: true, message: '请输入客户姓名', trigger: 'blur'},
                    ]
                },
                delModal:false,//删除
                delLoading:false,
                editModal:false,//编辑弹窗
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth>1600){
                this.pageSize = 20;
            }
            this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize)
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            otherOrdersTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var orderNo = formData.orderNo;//订单号
                var customer = formData.customer;//客户姓名
                var logisticsNo = formData.logisticsNo;//物流单号
                var systemNo = formData.systemNo;//系统单号
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        orderNo : orderNo,
                        customer : customer,
                        logisticsNo : logisticsNo,
                        systemNo : systemNo
                    }
                };
                axios.get('/otherorders',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    for(var i=0;i<res.data.data.length;i++){
                        if(res.data.data[i].status != 0){
                            res.data.data[i].cellClassName = {status:'demo-table-success-column'};
                        }
                    }
                    this.otherOrdersData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            invoiceSearch(){
                this.currentPage = 1;
                this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize)
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize)
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize)
            },
            //导入数据
            tendData(){
                this.otherModal = true;
            },
            exportData(){
                const link = document.createElement('a');
                link.download = "模板";
                link.href = '/src/file/other.xls';
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
            handleFormatError(file){
                this.$Message.error('文件 ' + file.name + ' 格式不正确，请上传 xls 或 xlsx 格式。');
            },
            uploadSuccess(file){
                this.$Message.destroy();
                this.$Message.success('文件上传成功。');
                this.otherModal = false;
                this.fileList=[];
            },
            uploadError(error,file,fileList){
                this.$Message.destroy();
                this.$Message.error(file);
                this.fileList=[];
            },
            uploadprogress(file){
                this.$Message.loading({
                    content: '文件正在上传，请稍后......',
                    duration: 0
                });
            },
            //关闭编辑弹窗
            closeOtherOrder(name){
                this.seeModal = false;//弹窗
                this.$refs[name].resetFields();
            },
            //清空编辑
            cancelOtherOrder(){
                this.otherValidate.deliveryDate='';
                this.otherValidate.price='';
                this.otherValidate.username='';
                this.otherValidate.cloth='';
                this.otherValidate.fabricNo='';
                this.otherValidate.quantity='';
                this.otherValidate.customer='';
            },
            //关闭查看弹窗
            closeseeOtherOrder(name){
                this.seeModal = false;//弹窗
                this.$refs[name].resetFields();
            },
            //查看详情
            openOther(column){
                axios.get('/otherorders/'+column).then(res => {
                    this.seeotherValidate=res.data;
                    this.seeModal = true;//弹窗
                }).catch(err =>{
                });
            },
            //编辑
            editOtherorders(column){
                axios.get('/otherorders/'+column).then(res => {
                    this.otherValidate=res.data;
                    this.editModal = true;//弹窗
                }).catch(err =>{
                });
            },
            //保存编辑
            saveOtherOrder (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/otherorders',this.otherValidate).then(res => {
                            this.modal_loading = false;
                            this.editModal = false;
                            this.$refs[name].resetFields();
                            this.$Message.success("编辑成功");
                            this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.$Message.error({content: err,duration: 0,closable:true});
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //根据ID删除列表
            remove(column){
                this.delModal=true;
                this.delId = column;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/otherorders/'+this.delId).then(res => {
                    this.delLoading = false;
                    this.delModal=false;
                    this.$Message.success('删除成功');
                    this.otherOrdersData = this.otherOrdersTableData(this.otherordersForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.$Message.error({content: err,duration: 0,closable:true});
                    this.delLoading = false;
                });
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            }
        }
    }
</script>